<template>
	<p><button @click="addItem">在任意位置添加一项</button><button @click="deleteItem">在任意位置删除一项</button></p>
	<TransitionGroup name="slide-fade">
		<li v-for="item in list" :key="item">{{item}}</li>
	</TransitionGroup>
</template>

<script setup>
	import { ref } from 'vue' 
	
	const list = ref([1,2,3,4])
	
	function getRandomPosition(length){
		let index
		
		if(length === 0){
			index = 0
		}else if(length === 1){
			index = 0
		}else{
			index = Math.floor(Math.random()*(length + 1))
		}
		return index 
	}
	function addItem(){
		list.value.splice(getRandomPosition(list.value.length), 0, list.value.length+1)
	}
	function deleteItem(){
		list.value.splice(getRandomPosition(list.value.length), 1)
	}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.slide-fade-enter-active,
.slide-fade-leave-active {
	transition: all 0.25s ease;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
	opacity: 0;
	transform: translateX(20px);
}
</style>
